<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" id="html">
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <base href="<?= base_url(1); ?>" />
        <link type="text/css" href="css/main.css?v=<?= $config['version'] ?>" rel="stylesheet" />
        
		<script type="text/javascript" src="<?= $config['res_url'] ?>/js/jquery.min.js?ver=<?= $config['version'] ?>"></script>
		<script type="text/javascript" src="<?= $config['res_url'] ?>/js/rgraph/libraries/RGraph.common.core.js" ></script>
		<script type="text/javascript" src="<?= $config['res_url'] ?>/js/rgraph/libraries/RGraph.line.js" ></script>
		<script type="text/javascript" src="<?= $config['res_url'] ?>/js/rgraph/libraries/RGraph.common.dynamic.js" ></script>	
		<script type="text/javascript" src="<?= $config['res_url'] ?>/js/rgraph/libraries/RGraph.bar.js" ></script>
		<script type="text/javascript" src="<?= $config['res_url'] ?>/js/rgraph/libraries/RGraph.pie.js" ></script>
		<script type="text/javascript" src="<?= $config['res_url'] ?>/js/rgraph/libraries/RGraph.hbar.js" ></script>
    </head>
    <body>
    <?php include(VIEWPATH . 'common/main_header.php'); ?>
    
     
    <canvas id="myCanvas1" width="700" height="500" style="border: 1px solid #ddd">[No canvas support]</canvas>
    <canvas id="myCanvas2" width="700" height="500" style="border: 1px solid #ddd">[No canvas support]</canvas>
    <canvas id="myCanvas3" width="700" height="500" style="border: 1px solid #ddd">[No canvas support]</canvas>
    <canvas id="myCanvas4" width="700" height="500" style="border: 1px solid #ddd">[No canvas support]</canvas>
    <script>
    function barTest(){
    var myGraph = new RGraph.Bar("myCanvas1", [1200, 1300, 1400, 1500, 3000, 1900, 2000, 2100, 2500]); //绘制柱状图，指定数据
    myGraph.Set("chart.title", "测试柱状图"); //指定统计图标题
    myGraph.Set("chart.title.xaxis", "X轴数据");  //指定x轴标题
    myGraph.Set("chart.title.yaxis", "Y轴数据"); //指定y轴标题
    myGraph.Set("chart.labels", ['1', '2', '3', '4', '5', '6', '7', '8', '9']); //指定x轴坐标轴的文字
    myGraph.Set("chart.ylabels.specific", ['3000', '2500', '2000', '1500', '1000', '500', '0']);  //指定y轴坐标轴的文字
    myGraph.Set("chart.labels.above", true); 
    myGraph.Set("chart.background.grid.autofit", true);  //指定网格自动与坐标轴单位对齐
    myGraph.Set("chart.background.grid.autofit.align", true);  //指定网格自动与坐标轴单位对齐
    myGraph.Set("chart.gutter", 60); //指定标签文字所使用的空间文字
    myGraph.Draw(); //绘制柱状图
    }
    function lineTest(){
    	var myGraph = new RGraph.Line("myCanvas2", [1100, 1420, 1460, 1580, 3090, 1920, 2010, 2120, 2720, 2120, 1720, 2690]); //绘制柱状图，指定数据
        myGraph.Set("chart.title", "测试折线图"); //指定统计图标题
        myGraph.Set("chart.title.xaxis", "X轴数据");  //指定x轴标题
        myGraph.Set("chart.title.yaxis", "Y轴数据"); //指定y轴标题
        myGraph.Set("chart.labels", ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']); //指定x轴坐标轴的文字
        myGraph.Set("chart.ylabels.specific", [ '3000', '2500', '2000', '1500', '1000', '500']);  //指定y轴坐标轴的文字
        myGraph.Set("chart.labels.above", true); 
        myGraph.Set("chart.background.grid.color", 'rgba(238,238,238,1)');  //指定网格自动与坐标轴单位对齐
        myGraph.Set("chart.gutter", 65); //指定标签文字所使用的空间文字
        myGraph.Draw(); //绘制柱状图
    }
    function pieTest(){
    	var pie = new RGraph.Pie("myCanvas3", [560, 340, 120, 150, 350, 190]); //绘制柱状图，指定数据
        pie.Set("chart.title", "测试饼状图"); //指定统计图标题
        pie.Set("chart.labels", ['18%', '7%', '12%', '17%', '24%', '22%']); //绘制饼图文字
        pie.Set("chart.key", ['1(18%)', '2(7%)', '3(12%)', '4(17%)', '5(24%)', '6(22%)']); //添加使用图例
        pie.Set("chart.key.background",'white');
        pie.Set("chart.linewidth", 5);
        pie.Set("chart.strokestyle", 'white'); //绘制饼图分割线
        pie.Set("chart.tooltips.effect", 'fade');
        pie.Set("chart.tooltips.event", 'onmousemove');
        pie.Set("chart.tooltips", ['1(18%)', '2(7%)', '3(12%)', '4(17%)', '5(24%)', '6(22%)']); //指定工具条上提示信息文字
        pie.Set('chart.highlight.style', '3d');
        pie.Draw(); //绘制柱状图
    }
    function HbarTest(){
    	var myGraph = new RGraph.HBar("myCanvas4", [1100, 1420, 1460, 1580, 3090, 1920, 2010, 2120, 2720, 2120, 1720, 2690]); //绘制柱状图，指定数据
        myGraph.Set("chart.title", "横向柱状图测试"); //指定统计图标题
        myGraph.Set("chart.title.xaxis", "X轴数据");  //指定x轴标题
        myGraph.Set("chart.title.yaxis", "Y轴数据"); //指定y轴标题
        myGraph.Set("chart.labels", ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']); //指定x轴坐标轴的文字
        myGraph.Set("chart.labels.above", true); 
        myGraph.Set("chart.background.grid.autofit", true);  //指定网格自动与坐标轴单位对齐
        myGraph.Set("chart.background.grid.autofit.align", true);  //指定网格自动与坐标轴单位对齐
        myGraph.Set("chart.gutter", 40); //指定标签文字所使用的空间文字
        myGraph.Draw(); //绘制柱状图
    }
    </script>
    <input type="button" value="bar" id="bar" onclick="barTest()"/>
    <input type="button" value="line" id="line" onclick="lineTest()"/>
    <input type="button" value="pie" id="pie" onclick="pieTest()"/>
    <input type="button" value="hbar" id="hbar" onclick="HbarTest()"/>
    </body>
</html>